<template>
    <div>
        <h2>好友列表</h2>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-table :data="lists" border style="width: 100%">
                    <el-table-column fixed type="index" label="#"></el-table-column>
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column fixed="right" label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" round @click="handleClick(scope.row)">聊天</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>

            <el-col :span="12" v-if="opendown">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>{{friendname}}</span>
                    </div>
                    <div class="text item">
                        <chatting ref="chat" :message="friendname"></chatting>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <h2>群</h2>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-table :data="grouplists" border style="width: 100%">
                    <el-table-column fixed type="index" label="#"></el-table-column>
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column fixed="right" label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" round @click="handleClick1(scope.row)">聊天</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>

            <el-col :span="12" v-if="opendown1">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>{{groupname}}</span>
                    </div>
                    <div class="text item">
                        <group ref="group" :groupmsg="groupname"></group>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import hunru from '@/mixin'
    import chatting from "@/components/chatting";
    import group from "@/components/group";
    import axios from "axios";

    export default {
        name: "friends",
        data() {
            return {
                lists: [],
                grouplists: [],
                username: '',
                is_accepted: true,
                friendname: '',
                groupname: '',
                opendown: false,
                opendown1: false
            }
        },
        created() {
            axios.get('http://127.0.0.1:8000/api/groupname/', {
                    headers: {
                        token: sessionStorage.getItem('token')
                    },
                    params: {
                        username: sessionStorage.getItem('username')
                    }
                }
            ).then(response => {
                this.grouplists = response.data.results
                this.username = sessionStorage.getItem('username')
            })
                .catch(error => {
                    console.log(error);
                });
        },
        mixins: [hunru],
        components: {
            chatting,
            group
        },
        methods: {
            handleClick(row) {
                this.opendown = true
                this.opendown1 = false
                this.friendname = row.name
                this.$refs.chat.chatMethod();
            },
            handleClick1(row) {
                this.opendown = false
                this.opendown1 = true
                this.groupname = row.name
                this.$refs.group.groupMethod();
            }
        }
    }
</script>

<style scoped>
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 100%;
    }
</style>